<!-- 项目列表 -->
<template>
	<view>
		<!-- 搜索 -->
		<search id="search" :fixed="true" v-model="searchVal" color="#999" :searchVal="searchVal" :backgroundColor="themeBgColor" :border="false" @search="search" @clear="clear">
			<view class="filter uni-flex uni-flex-center" @tap="filter">
				<text class="font26" :style="{ color: themeBgColor }">筛选</text>
				<uni-icons :color="themeBgColor" class="icon-arrow" type="shaixuan" size="22" />
			</view>
		</search>
		<!-- 列表 -->
		<mescroll-uni :down="downOption" @emptyclick="downCallback" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">
			<uni-swipe-action class="journal">
				<uni-swipe-action-item v-for="(item, index) in cardList" :key="index" :right-options="editerOptions" @click="bindClick" @change="swipeChange($event, index)">
					<view class="journal-item uni-flex uni-flex-space-between uni-flex-center"  @tap="godetail">
						<view class="title font26">{{ item.title }}</view>
						<view class="date font22">{{ item.date }}</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</mescroll-uni>
		<!-- 筛选 -->
		<right-filter ref="child" />
		<!--确认弹层-->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="input" title="您确定要删除吗？" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 新增 -->
		<uni-icons :color="themeBgColor" class="icon-add" type="jia" size="50" @tap="goEdit"/>
	</view>
</template>

<script>
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import rightFilter from '@/pages/journal/components/right-filter.vue';
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import { mapGetters } from 'vuex';
export default {
	components: {
		MescrollUni,
		uniIcons,
		rightFilter,
		uniSwipeAction,
		uniSwipeActionItem,
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
	},
	computed: {
		...mapGetters(['user', 'themeBgColor'])
	},
	data() {
		return {
			searchVal: '', // 搜索内容
			editerOptions: [
				// 滑动操作按钮
				{
					text: '编辑',
					style: {
						backgroundColor: '#1093f4'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#ffa244'
					}
				}
			],
			mescroll: null,
			// 下拉刷新的常用配置
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
			},
			// 上拉加载的常用配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				},
				toTop: {
					src: '/static/img/backtop.png'
				},
				textNoMore: '没有更多数据了'
			},
			// 列表数据
			cardList: [
				{
					title: '项目日志钢材  ',
					date: '2020-11-17'
				},
				{
					title: '项目日志钢材  ',
					date: '2020-11-17'
				},
				{
					title: '项目日志钢材  ',
					date: '2020-11-17'
				},
				{
					title: '项目日志钢材  ',
					date: '2020-11-17'
				},
				{
					title: '项目日志钢材  ',
					date: '2020-11-17'
				}
			]
		};
	},
	methods: {
		// 搜索
		search() {
			console.log('search')
			// this.$refs.projectListRef.queryByName(this.searchVal)
		},
		// 清空搜索
		clear() {
			this.searchVal = ''
			this.search()
		},
		// 筛选点击
		filter() {
			this.$refs.child.filterHandleOpen();
		},
		// mescroll组件初始化的回调,可获取到mescroll对象
		mescrollInit(mescroll) {
			// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调, 有三种处理方式: */
		downCallback(mescroll) {
			// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
			mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
			console.log(this.user);
			if (!this.user) {
				mescroll.endErr();
				return;
			}
			// todo: api请求分页查询项目待办
			this.$minApi.listAuditProject().then(res => {
				if (res.ok()) {
					this.cardList = res.data;
					// 成功隐藏下拉加载状态
					//  后台接口有返回列表的总页数 totalPage
					mescroll.endByPage(this.cardList.length, this.cardList.length);
					this.$nextTick(() => {
						mescroll.endSuccess(this.cardList.length);
					});
				}
			});
		},
		async queryByName(name) {
			uni.showLoading({
				title: '正在查询数据...'
			});
			const res = await this.$minApi.listAuditProject();
			if (res.ok()) {
				this.cardList = res.data;
			}
			uni.hideLoading();
		},
		updateQuery() {
			this.queryByName();
		},
		bindClick(e) {
			if (e.content.text === '编辑') {
				uni.navigateTo({
					url: '/pages/journal/journal-edit'
				});
			} else {
				this.$refs.popup.open();
			}
		},
		swipeChange(e, index) {
			console.log('当前状态：' + open + '，下标：' + index);
		},
		close(done) {
			done();
		},
		confirm(done, value) {
			// 输入框的值
			console.log('删除');
			// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
			// ...
			done();
		},
		// 新增编辑
		goEdit(){
			uni.navigateTo({
				url: '/pages/journal/journal-edit'
			})
		},
		// 跳转项目详情
		godetail() {
			console.log(1)
			uni.navigateTo({
				url: '/pages/journal/journal-detail'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.mescroll-totop {
	opacity: 1 !important;
}

.filter {
	width: 25%;
	// padding-right:10rpx;
}
.journal {
	padding: 20rpx 40rpx;
	background: #fff;
	.journal-item {
		width: 100%;
		padding: 0 20rpx;
		line-height: 80rpx;
		height: 80rpx;
		border-bottom: 1px solid #eee;
		.date {
			width: 20%;
		}
	}
}
.icon-add{
	position: fixed;
	right:15%;
	bottom:20%;
	z-index: 100;
	border-radius: 50%;
	box-shadow: 0 0 6px 3px rgba(0,0,0,.2);
}
</style>
